<!-- 车型添加 -->
<template>
  <el-dialog
    :visible="showDialog"
    :title="title"
    width="600px"
    :before-close="handleClose"
  >
    >
    <el-form
      ref="carModels"
      :hide-required-asterisk="true"
      label-width="130px"
      :model="carModels"
      :rules="rules"
    >
      <el-form-item
        prop="name"
        label="车辆类型"
      >
        <el-input
          v-model="carModels.name"
          placeholder="请输入车型名称"
        />
      </el-form-item>
      <el-form-item
        prop="allowableLoad"
        label="应载重量"
      >
        <el-input
          v-model="carModels.allowableLoad"
          placeholder="请输入车型载重"
        >
          <template slot="suffix">吨</template>
        </el-input>
      </el-form-item>
      <el-form-item
        prop="allowableVolume"
        label="应载体积"
      >
        <el-input
          v-model="carModels.allowableVolume"
          placeholder="请输入车型体积"
        >
          <template slot="suffix">立方</template>
        </el-input>
      </el-form-item>
      <el-form-item
        prop="measureLong"
        label="长"
      >
        <el-input
          v-model="carModels.measureLong"
          placeholder="请输入"
        >
          <template slot="suffix">米</template>
        </el-input>
      </el-form-item>
      <el-form-item
        prop="measureWidth"
        label="宽"
      >
        <el-input
          v-model="carModels.measureWidth"
          placeholder="请输入"
        >
          <template slot="suffix">米</template>
        </el-input>
      </el-form-item>
      <el-form-item
        prop="measureHigh"
        label="高"
      >
        <el-input
          v-model="carModels.measureHigh"
          placeholder="请输入"
        >
          <template slot="suffix">米</template>
        </el-input>
      </el-form-item>
      <!-- <el-form-item>
        <el-button type="warning">确认</el-button>
        <el-button class="btn">取消</el-button>
      </el-form-item> -->
      <template>
        <el-button
          class="btn"
          type="warning"
          @click="add"
        >确认</el-button>
        <el-button
          class="btn"
          @click="btnX"
        >取消</el-button>
      </template>
    </el-form>
  </el-dialog>
</template>
<script>
import { _postCarModelsAdd, _putCarModelsOne } from '@/api/carModels'
export default {
  name: 'CarModelsAdd',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      carModels: {
        allowableLoad: '', // 准载重量
        allowableVolume: '', // 准载体积
        measureHigh: '', // 高
        measureLong: '', // 长
        measureWidth: '', // 宽
        name: '' // 车辆类型名称
      },
      rules: {
        name: [
          { required: true, message: '此处必须填写', trigger: 'blur' },
          { min: 0, max: 30, message: '支持中英文/数字,最大30个字符', trigger: 'blur' }
        ],
        allowableLoad: [
          { required: true, message: '此处必须填写', trigger: 'blur' },
          { pattern: /^[0-9]{1,3}(\.[0-9]{1,2})?$/, message: '最大3位(0.01-999),到小数点后2位', trigger: 'blur' }
        ],
        allowableVolume: [
          { required: true, message: '此处必须填写', trigger: 'blur' },
          { pattern: /^[0-9]{1,3}(\.[0-9]{1,2})?$/, message: '最大3位(0.01-999),到小数点后2位', trigger: 'blur' }
        ],
        measureWidth: [
          { required: true, message: '此处必须填写', trigger: 'blur' },
          { pattern: /^[0-9]*(\.[0-9]{1,3})?$/, message: '请填写宽度', trigger: 'blur' }
        ],
        measureHigh: [
          { required: true, message: '此处必须填写', trigger: 'blur' },
          { pattern: /^[0-9]*(\.[0-9]{1,3})?$/, message: '请填写高度', trigger: 'blur' }
        ],
        measureLong: [
          { required: true, message: '此处必须填写', trigger: 'blur' },
          { pattern: /^[0-9]*(\.[0-9]{1,3})?$/, message: '请填写长度', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleClose() {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.closeDialog()
        })
        .catch(_ => {})
    },
    btnX() {
      this.closeDialog()
    },
    // 确认按钮
    add() {
      if (!this.carModels.id) {
        this.$refs.carModels.validate(async (isOk) => {
          if (isOk) {
            try {
              const res = await _postCarModelsAdd(this.carModels)
              if (res.msg === 'ok') {
                this.$message.success('新增成功')
                this.$emit('update:showDialog', false)
                this.$refs.carModels.resetFields()
                this.$parent.getCarModelsList()
              }
            } catch (err) {
              this.$message.warning('新增失败')
            }
          }
        })
      } else {
        this.$refs.carModels.validate(async(isOk) => {
          if (isOk) {
            try {
              const res = await _putCarModelsOne(this.carModels)
              if (res.msg === 'ok') {
                this.$message.success('编辑成功')
                this.$emit('update:showDialog', false)
                this.$refs.carModels.resetFields()
                this.$parent.getCarModelsList()
              }
            } catch (err) {
              this.$message.warning('编辑失败')
            }
          }
        })
      }
    },
    closeDialog() {
      this.$emit('update:showDialog', false)
      this.$refs.carModels.resetFields()
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__label {
  font-weight: 400
}
.btn {
  width: 90px;
  margin-top: 14px;
  margin-bottom: 38px;
}
::v-deep .el-input__suffix {
  color: #000;
}
</style>
